<template>
  <div class="app-container">
    <!-- form -->
    <common-form
      @searchSubmit="searchSubmit"
      :addTitle="addTitle"
      @showDialog="showDialog"
    />

    <!-- table -->
    <common-table
      :tableData="tableData"
      :labelTitle="labelTitle"
      :urls="urls"
      @delCourse="delCourse"
      @updateStatus="updateStatus"
      @showDialog="showDialog"
    />

    <!-- pagination -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>

    <!-- dialog -->
    <common-dialog
      :type="type"
      :dialogVisible="dialogVisible"
      :dialogTitle="dialogTitle"
      :itemLabel="itemLabel"
      @addCourse="addCourse"
      @updateCourse="updateCourse"
      ref="ruleForm"
    />
  </div>
</template>

<script>
import {
  getCourselList,
  addCourse,
  delCourse,
  updateStatus,
  updateCourse
} from "@/api/course";
import CommonForm from "./components/CommonForm";
import CommonTable from "./components/CommonTable";
import CommonDialog from "./components/CommonDialog";

export default {
  components: {
    CommonForm,
    CommonTable,
    CommonDialog
  },
  data() {
    return {
      formInline: {},
      page: 1,
      total: 0,
      type: "media",
      tableData: [],
      addTitle: "新增图文",
      labelTitle: "图文内容",
      itemLabel: "试看内容",
      dialogTitle: "",
      dialogImageUrl: "",
      dialogVisible: false,
      urls: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcdn.duitang.com%2Fuploads%2Fitem%2F201407%2F16%2F20140716212515_TvYEA.jpeg&refer=http%3A%2F%2Fcdn.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1620051441&t=a46f3f27885c2087828d398d9c2ff46d'
    };
  },
  methods: {
    // 搜索
    searchSubmit(formInline) {
      this.formInline = formInline;
      this.getCourselList(formInline);
    },
    // 获取列表数据
    async getCourselList() {
      const {
        code,
        data: { items, total }
      } = await getCourselList(this.page, this.type, this.formInline);
      if (code == 20000) {
        this.tableData = items;
        this.total = total;
      }
    },
    // 分页
    handleSizeChange() {
      this.getCourselList();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getCourselList();
    },
    // 添加 编辑 dialog
    showDialog(flag) {
      if (flag == "add") {
        this.dialogVisible = true;
        this.dialogTitle = "新增";
      } else {
        this.dialogVisible = true;
        this.dialogTitle = "编辑";
        this.$refs.ruleForm.showData(flag);
      }
    },
    // 添加
    async addCourse(ruleForm) {
      const { code } = await addCourse(ruleForm, this.type);
      if (code == 20000) {
        this.dialogVisible = false;
        this.$message.success("添加成功");
        this.getCourselList();
      }
    },
    // 删除
    async delCourse(id) {
      let arr = [];
      arr.push(id);
      const { code } = await delCourse(arr);
      if (code == 20000) {
        this.$message.success("删除成功");
        this.getCourselList();
      }
    },
    // 上架 下架
    async updateStatus({ id, status }) {
      const res = await updateStatus(id, status == 0 ? 1 : 0);
      if (res.code == 20000) {
        this.$message.success("操作成功");
        this.getCourselList();
      }
    },
    // 编辑
    async updateCourse(val) {
      const { code } = await updateCourse(val);
      if (code == 20000) {
        this.dialogVisible = false;
        this.$message.success("更新成功");
        this.getCourselList();
      }
    }
  },
  created() {
    this.getCourselList();
  }
};
</script>

<style lang="scss" scoped></style>
